<template>
  <div style="margin: 50px" />
  <el-form label-width="80px" :model="formLabelAlign" label-position="top">
    <el-form-item label="手机号：">
      <el-input placeholder="请输入手机号……" v-model="formLabelAlign.account" :prefix-icon="PhoneFilled" />
    </el-form-item>
    <el-form-item label="密码：" :prefix-icon="Lock">
      <el-input placeholder="请输入密码……" v-model="formLabelAlign.pwd" :prefix-icon="Lock" show-password />
    </el-form-item>
    
    <!-- <el-button type="primary">登录</el-button> -->
    <el-button @click="onSubmit" type="primary" round >登录</el-button>
    <!-- <el-button @click="onSubmit" type="primary" round :loading="true">登录中……</el-button> -->
    <!-- <el-button @click="Register" type="info" round>注册</el-button> -->
  </el-form>
</template>
  
<script lang="js" setup>
import axios from 'axios'
import qs from 'qs'
import { reactive, ref } from 'vue'
import { PhoneFilled, Lock } from "@element-plus/icons-vue"


const formLabelAlign = reactive({
  account: '',
  pwd: ''
})
async function onSubmit() {
  const data = {
    'account': formLabelAlign.account,
    'pwd': formLabelAlign.pwd,
    'type': 1
  }
  const options = {
    method: 'POST',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    data: qs.stringify(data),
    url: '/api/sso/doLogin'
  }
  await axios(options)
  location.reload()
}
</script>

<style scoped>
.el-input__inner {
  height: 36px;
}

.el-form-item__label {
  font-size: 15px;
}

.el-button {
  margin: auto;
  margin-top: 20px;
  width: 90%;
  height: 36px
}

.el-checkbox {
  margin-left: 0;
}
</style>
  